<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>饼图数据展示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script th:src="@{/echarts/echarts.min.js}"></script>
    <script th:src="@{/echarts/china.js}"></script>
    <script th:src="@{/echarts/jquery-1.11.1.min.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
</head>
<body class="childrenBody">
    <div>
        <!-- 内容主体区域 -->
        <div style="padding-top: 50px;">
            <div id="main" style="width: 1000px;height:600px;"></div>
        </div>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var dataList = [];
        var option = {
            color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)',
            },
            toolbox: {
                show: true,
            },
            legend: {
                x: '80%', //水平位置，【left\center\right\数字】
                y: '350', //垂直位置，【top\center\bottom\数字】
                align: 'left', //字在图例的左边或右边【left/right】
                orient: 'vertical', //图例方向【horizontal/vertical】
                icon: 'circle', //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
                textStyle: {
                    color: '#8C8C8C',
                }// height:150
            }
        };


        $.ajax({
            url: "/api/queryPie",
            method: "GET",
            dataType: "JSON",
            success: function (data) {
                for (let i in data.data){
                    dataList[i] = data.data[i];
                }
                myChart.setOption({
                    series: [
                        {
                            name: '疫情数据饼图',
                            type: 'pie',
                            radius: [0, 150],
                            data: dataList,
                        },
                    ]
                })
            }
        })
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>